<template>
  <!--六合彩-->
  <div id="pageE">
    <cp-header :zIndex="headerZIndex">
      <cp-header-item slot="left">
        <router-link to="/ssc">
          <i class="fa fa-chevron-left"></i>
        </router-link>
      </cp-header-item>
      <cp-header-item slot="center">
        <p>玩<br>法</p>
        <span @click="showModal">{{tag}}<i class="fa fa-caret-down icon-toggle"></i></span>
      </cp-header-item>
      <cp-area-list :areaList="areaList" slot="right"></cp-area-list>
    </cp-header>
    <cp-body-content :bodyContent="selectedClass"  :classType="classType"
                     v-on:click-content-basket="listenBasketShow" v-on:close-content-basket="listenContentCloseBasket"></cp-body-content>

    <cp-bottom-info :classType="classType"></cp-bottom-info>
    <cp-class-modal  v-model="visibleModal" v-on:modal-show="listenModal">
      <cp-classes-ul slot="body" :show="visibleModal" :classList="classList"
                     v-on:select-one-class="listenSelectClass"></cp-classes-ul>
    </cp-class-modal>
  </div>
</template>
<script>
  import cpHeader from "../components/navi/cp-header.vue";
  import cpHeaderItem from "../components/navi/cp-header-item.vue";
  import cpClassModal from "../components/dialog/cp-class-modal.vue";
  import cpClassesUl from "../components/dialog/cp-classes.vue";
  import cpBodyContent from "../components/body/cp-body-content.vue";
  import cpAreaList from "../components/dialog/cp-area-list.vue";
  import cpBottomInfo from "../components/bottom/cp-bottom-info.vue";
  import {lhcClasses, sscClasses, k3Classes,areaList} from '../data/cpData-3'

  export default {
    components: {
      cpClassesUl,
      cpClassModal,
      cpHeader,
      cpHeaderItem,
      cpAreaList,
      cpBodyContent,
      cpBottomInfo,
    },
    name: 'pageE',
    data() {
      return {
        classList: lhcClasses,
        areaList: areaList,
        popupVisible: false,
        visibleModal: false,
        topPopup: false,
        classType:lhcClasses[0].classType,
        selectedClass:{},
        tag:"",
        headerZIndex:1503,
      }
    },
    methods: {
      showModal() {
        this.visibleModal = !this.visibleModal;
      },
      listenSelectClass(data) {
        this.visibleModal = false;
        this.selectedClass=data;
        this.tag = data.tag;
      },
      /**
       * 监听modal
       * @param modalZIndex
       */
      listenModal(modalZIndex){
        this.headerZIndex = modalZIndex;
      },
      listenBasketShow(zIndex){
        this.headerZIndex = zIndex;
      },
      listenContentCloseBasket(zIndex){
        this.headerZIndex = zIndex;
      }
    },
    computed:{

    }
  }
</script>
<style>
  #pageD{
    background: #317455;
    height: 100%;
    width: 100%;
  }
</style>

